<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
<!--    3.使用组件-->
<!--    <Login></Login>-->
<!--    <Register></Register>-->
<!--    <User></User>-->

<!--    路由出口标签-->
<router-view></router-view>
</div>
<script src="../vue.js"></script>
<!--导入路由依赖-->
<script src="../vue-router3.js"></script>
<script>

    // 1.定义组件
    const Login = {
        template:`
            <div>
                <h1>欢迎登录</h1>
                <form action="">
                   <p><input type="text" placeholder="请输入用户名"></p>
                   <p><input type="text" placeholder="请输入密码"></p>
                   <p><input type="submit" value="立即登录"></p>
                </form>
            </div>
        `
    }


    const Register = {
        template:`
            <div>
                <h1>欢迎注册</h1>
                <form action="">
                   <p><input type="text" placeholder="请输入用户名"></p>
                   <p><input type="text" placeholder="请输入密码"></p>
                   <p><input type="submit" value="立即注册"></p>
                </form>
             </div>
        `
    }

    const User = {
        template:`
            <h1>用户信息主页面</h1>
        `
    }

    // 2. 定义一些路由  每个路由都需要映射到一个组件。
    const routes = [
        { path: '/', redirect:'/login' },  //  路由重定向
        { path: '/login', component: Login },  // 路由
        { path: '/register', component: Register },
        { path: '/user', component: User },
    ]

    //  创建路由对象  实现  路径和组件的映射关系
    const  router = new VueRouter({
        routes
    })
    const vm = new Vue({
        el:'#app',
        data:{},
        methods:{},
        components:{   // 2.组件的注册
            // Login,Register,User
        },
        router   //  注册路由
    })
</script>
</body>
</html>